<template>
	<view class="container">
		<!-- <swiper class="swiper" :duration="500" :interval="3000">
			<swiper-item class="swiper-item" v-for="(item, index) in swiperList" :key="index">
				<image style="width: 100%;height: 100%;border: 1rpx solid red;" :src="item.image"></image>

			</swiper-item>
		</swiper> -->


		<swiper class="swiper" vertical :duration="500" :interval="3000" loop='true'>
			<swiper-item class="swiper-item" v-for="(item, index) in swiperItems" :key="index">

				<!-- 第一页的纵向轮播 -->
				<view v-if="item.type==1" class='swiper_box'>
					<swiper :duration="500" circular @change="swiperChange" style="height: 100vh;">
						<swiper-item v-for="(item, index) in swiperList" :key="index">
							<image style="width: 100%;height: 100%;" :src="item.image"></image>
						</swiper-item>
					</swiper>
					<!-- 纵向轮播 -->
					<view class="dots">
						<block v-for="(v, k) in swiperItems" :key="k">
							<view :class=" k == currentSwiper ? ' active' : 'dot'"></view>
						</block>
					</view>
				</view>
				<!-- 第二页的纵向轮播 -->
				<view v-if="item.type==2" class='swiper_box'>
					<swiper :duration="500" circular @change="swiperChangeTwo" style="height: 70vh;">
						<swiper-item v-for="(item, index) in swiperList" :key="index">
							<image style="width: 100%;height: 100%;" :src="item.image"></image>
						</swiper-item>
					</swiper>
					<!-- 纵向轮播 -->
					<view class="dots">
						<block v-for="(v, k) in swiperItems" :key="k">
							<view :class=" k == currentSwiperTwo ? ' active' : 'dot'"></view>
						</block>
					</view>
					<view class="uni_bot">
						<view class="uni_bot_warp">澳门豪华大酒店</view>
						<view class="uni_bot_cot" style='color: #FEAF25;'>综合评分：5.0分</view>
						<view class="uni_bot_cot">地址：北京市丰台区六里桥街道西四环南路20号</view>
						<view class="uni_bot_btn">立即进入</view>
						<image style="width: 50rpx;height: 50rpx;margin-top: 40rpx;"
							src="../../static/images/shubiaoBlack.png"></image>
						<view class="swiper-item-contents">上滑查看更多</view>
					</view>
				</view>

				<!-- 第三页的纵向轮播 -->
				<view v-if="item.type==3" class='swiper_box'>
					<view>123</view>

					<image class="img_box" style="" src="../../static/images/ban1.png"></image>
						<view class="img_box_card">
							<!-- <uni-transition mode-class="slide-top" :show="show"> -->
								<view class="img_box_card_top1 " v-for="(item,index) in topList" :key="index">
									<view class="img_box_card_top1_dispaly">
										<!-- <image style="width: 70rpx;height: 70rpx;margin-top: -10rpx;"
											src="../../static/images/top1.png"></image> -->
										<image style="width: 70rpx;height: 70rpx;margin-top: -10rpx;" :src="item.img">
										</image>
										<view class='img_box_card_top1_shouc'>
											<image style="width: 50rpx;height: 50rpx;"
												src="../../static/images/like.png">
											</image>
											<view>
												{{item.shouc}}
											</view>
										</view>
									</view>
									<view class="img_box_card_top1_swim" @click="mmd()">
										{{item.swim}}
									</view>
									<view class="img_box_card_top1_text">
										{{item.text}}
									</view>
								</view>
							<!-- </uni-transition> -->
						</view>
				</view>


			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				is_flag: false, // 初始时不触发动画  
				isEntering: false,
				title: 'Hello',
				currentSwiper: 0,
				currentSwiperTwo: 0,
				swiperList: [{
						image: '../../static/images/ban1.png'
					},
					{
						image: '../../static/images/ban1.png'
					},
					{
						image: '../../static/images/ban1.png'
					}
				],

				swiperItems: [{
						content: '上滑查看更多',
						type: 1,
					},
					{
						// content: '上滑查看更多',
						// en: 'LUOVRE ABU DHABL',
						type: 2,
						// assess: '立即进入',
						// image: '../../static/images/ban1.png'
					},
					{
						content: '第三页内容',
						image: '../../static/images/ban1.png',
						type: 3,
						// assess: '立即进入',
					},
					// 可以根据需求添加更多页面
				],
				topList: [{
						shouc: '收藏',
						swim: '三日游',
						img: '../../static/images/top1.png',
						text: '刘亦菲同款旅游'
					},
					{
						shouc: '收藏',
						swim: '三日游',
						img: '../../static/images/top2.png',
						text: '刘亦菲同款旅游'
					},
					{
						shouc: '收藏',
						swim: '三日游',
						img: '../../static/images/top3.png',
						text: '刘亦菲同款旅游'
					},
				]
			}
		},
		onLoad() {

		},
		methods: {
			mmd() {
				this.is_flag = !this.is_flag;
				console.log(this.is_flag);
			},

			swiperChange(e) {
				console.log(e.detail.current);
				this.currentSwiper = e.detail.current
				console.log(this.currentSwiper, '83');
			},
			swiperChangeTwo(e) {
				console.log(e.detail.current);
				this.currentSwiperTwo = e.detail.current
				console.log(this.currentSwiperTwo, '106');
			},

		}
	}
</script>

<style scoped lang="scss">
	.swiper_box {
		height: auto;
		position: relative;
	}

	.container {
		width: 100vw;
		height: 100vh;
	}

	.swiper {
		width: 100%;
		height: 100%;
	}

	.swiper-item {
		// border: 1rpx solid red;
		width: 100%;
		height: 100%;
	}

	.swiper-item-content {
		font-size: 14px;
		position: absolute;
		top: 80%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: #ffffff;
	}

	.swiper-item-contents {
		font-size: 14px;
		position: absolute;
		top: 105%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.swiper-item-warp {
		font-size: 24px;
		position: absolute;
		top: 50rpx;
		left: 50rpx;
		margin-top: 500rpx;
	}

	.swiper-item-button {
		position: absolute;
		font-size: 30rpx;
		top: 80%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 200rpx;
		height: 80rpx;
		border: 1rpx solid red;
		border-radius: 20rpx;
		display: grid;
		place-items: center;
	}


	.dots {
		width: 210rpx;
		height: 20rpx;
		display: flex;
		flex-direction: row;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 120rpx;
	}

	/*未选中时的小圆点样式 */

	.dot {
		width: 70rpx;
		height: 10rpx;
		border-radius: 14rpx;
		margin-right: 26rpx;
		background-color: #ffffff;
	}

	/*选中以后的小圆点样式  */

	.active {
		width: 70rpx;
		height: 10rpx;
		border-radius: 14rpx;
		margin-right: 26rpx;
		background-color: #fc4308;
	}

	.uni_bot {
		position: absolute;
		top: 112%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100%;
		// border: 1rpx solid red;
		text-align: center;

		background-color: #ffffff;
		border-top-left-radius: 15px;
		/* 左上角 */
		border-top-right-radius: 15px;

		// background: linear-gradient(to bottom, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 0) 33.33%);  
		// background-repeat: no-repeat;  
		// background-size: 100% 100%;  

		/* 右上角 */
		&_warp {
			font-size: 40rpx;
			font-weight: 800;
			margin-top: 30rpx;
		}

		&_cot {
			margin-top: 10rpx;
			margin-bottom: 20rpx;
		}

		&_btn {

			margin: 0 auto;
			width: 400rpx;
			height: 100rpx;
			// border: 1rpx solid red;
			line-height: 100rpx;
			font-size: 40rpx;
			font-weight: 800;
			color: #ffffff;
			border-radius: 50rpx;
			background: linear-gradient(to right, #a770ef, #cf8bf3, #fdb99b)
		}
	}

	.uni_warp {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		// border: 1rpx solid red;
		width: 80%;
		// margin: 0 auto;

		&_card {
			// width: 200rpx;
			// height: 200rpx;
			// border: 1rpx solid red;
		}
	}

	.img_box {
		// border: 1rpx solid red;
		width: 100vw;
		height: 100vh;
		position: relative;
	}

	.img_abs {
		width: 700rpx;
		height: 800rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		&_top1 {
			width: 70rpx;
			height: 70rpx;
			position: absolute;
			top: -10rpx;
			left: 30rpx;


		}

		&_card {

			height: 300rpx;
		}

		&_img {
			width: 100%;
			height: 100%;
			position: relative;
		}

		&_collect {
			position: absolute;
			top: 20rpx;
			right: 50rpx;
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			border-radius: 40rpx;
			width: 150rpx;
			height: 60rpx;
			background-color: #3F4754;
			color: #ffffff;
		}

		&_day {
			position: absolute;
			top: 180rpx;
			left: 50rpx;
			width: 120rpx;
			height: 50rpx;
			// border: 1rpx solid red;
			text-align: center;
			background-color: #6016CD;
			color: #ffffff;
			border-radius: 10rpx;
		}

		&_btm {
			position: absolute;
			top: 230rpx;
			left: 50rpx;
			color: #ffffff;
			font-size: 40rpx;
		}
	}



	.img_box_card {
		width: 600rpx;
		height: 900rpx;
		// border: 1rpx solid red;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		&_top1 {
			border: 1rpx solid red;
			width: 100%;
			height: 300rpx;
			margin: 0 auto;
			background-image: url('../../static/logo.png');
			background-position: center center;
			/* 背景图不平铺 */
			background-repeat: no-repeat;
			/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
			// background-attachment: fixed;
			/* 让背景图基于容器大小伸缩 */
			background-size: 100% 100%;
			/* 设置背景颜色，背景图加载过程中会显示背景色 */
			background-color: #464646;
			margin-top: 30rpx;

			&_dispaly {
				display: flex;
				justify-content: space-between;
			}

			&_shouc {

				display: flex;
				justify-content: space-evenly;
				align-items: center;
				border-radius: 40rpx;
				width: 150rpx;
				height: 60rpx;
				background-color: #3F4754;
				color: #ffffff;
				margin: 20rpx;
			}
		}


	}

	.img_abs_day {
		width: 120rpx;
		height: 50rpx;
		text-align: center;
		background-color: #6016CD;
		color: #ffffff;
		border-radius: 10rpx;
	}

	.img_abs_btm {}

	.img_box_card_top1_swim {
		margin-top: 70rpx;
		margin-left: 30rpx;
		// margin: 30rpx;
		width: 120rpx;
		height: 50rpx;
		text-align: center;
		background-color: #6016CD;
		color: #ffffff;
		border-radius: 10rpx;
	}

	.img_box_card_top1_text {
		margin-left: 30rpx;
		color: #ffffff;
		font-size: 40rpx;
	}

	@keyframes shakeX {

		from,
		to {
			transform: translate3d(0, 0, 0);
		}

		10%,
		30%,
		50%,
		70%,
		90% {
			transform: translate3d(-10px, 0, 0);
		}

		20%,
		40%,
		60%,
		80% {
			transform: translate3d(10px, 0, 0);
		}
	}

	.shakeX {
		animation-name: shakeX;
		animation-duration: 1s;
	}
</style>